{extend name="common/main"/}
{block name="style"}
    <link rel="stylesheet" href="__ZUI__/lib/datetimepicker/datetimepicker.min.css">
{/block}
{block name="script"}
    <!-- daterange picker -->
    <script src="__ZUI__/lib/chart/zui.chart.min.js"></script>
    <!-- daterange picker -->
    <script src="__ZUI__/lib/datetimepicker/datetimepicker.min.js"></script>
    
    <script>

        var startDate="{$options.startDate}",
            endDate="{$options.endDate}";
        $(function(){
            $('#reservation').datetimepicker({
                locale:{
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                },
                format: 'YYYY-MM-DD',
                startDate:startDate,
                endDate:endDate,
                maxDate:endDate
            });
            
            $('#reservation').on('apply.daterangepicker',function(ev, picker) {
                $.post("{:url()}", {startDate:picker.startDate.format('YYYY-MM-DD'),endDate:picker.endDate.format('YYYY-MM-DD')}, function (msg) {
                    $('#remain_data').html(msg);
                    change_show_day();
                    if(msg.status==0){
                        handleAjax(msg);
                    }
                });
            });
            $('[name="day_show[]"]').click(change_show_day);
        });

        var change_show_day=function(){
            $('.day').hide();
            var day=$('[name="day_show[]"]');
            day.each(function(){
                if($(this).is(':checked')){
                    $('.'+$(this).val()).show();
                }
            });
        }
    </script>
{/block}
{block name="body"}
    <div class="main-title">
        <h2>新注册用户前8日留存率统计</h2>
    </div>
    {include file="count/_top_nav"/}
    <div class="clearfix with-padding">
        <div class="col-md-9">
        <div class="box box-info remain">
            <div class="box-header with-border">
                <div class="box-tools pull-right">
                    <div class="checkbox_block">

                        <div class="day_label day1_label">
                            <input type="checkbox" id="day1_label" name="day_show[]" value="day1" checked/>
                            <label for="day1_label" >次日</label>
                        </div>
                        
                        <div class="day_label day2_label">
                            <input type="checkbox" id="day2_label" name="day_show[]" value="day2" checked/>
                            <label for="day2_label">2日</label>
                        </div>
                        
                        <div class="day_label day3_label">
                            <input type="checkbox" id="day3_label" name="day_show[]" value="day3" checked/>
                            <label for="day3_label">3日</label>
                        </div>
                        
                        <div class="day_label day4_label">
                            <input type="checkbox" id="day4_label" name="day_show[]" value="day4" checked/>
                            <label for="day4_label">4日</label>
                        </div>
                        
                        <div class="day_label day5_label">
                            <input type="checkbox" id="day5_label" name="day_show[]" value="day5" checked/>
                            <label for="day5_label">5日</label>
                        </div>
                        
                        <div class="day_label day6_label">
                            <input type="checkbox" id="day6_label" name="day_show[]" value="day6" checked/>
                            <label for="day6_label">6日</label>
                        </div>
                        
                        <div class="day_label day7_label">
                            <input type="checkbox" id="day7_label" name="day_show[]" value="day7" checked/>
                            <label for="day7_label">7日</label>
                        </div>
                        
                        <div class="day_label day8_label">
                            <input type="checkbox" id="day8_label" name="day_show[]" value="day8" checked/>
                            <label for="day8_label">8日</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-body">
                <button class="btn btn-link pull-left" id="reservation" style="font-size: 18px;">
                    <i class="icon icon-calendar"></i> 时段选择
                </button>
                <table class="remain-table">
                    <thead>
                    <tr>
                        <th style="width: 80px;">日期</th>
                        <th style="width: 80px;">注册人数</th>
                        <th>留存率</th>
                    </tr>
                    </thead>
                    <tbody id="remain_data">
                        {include file="count/_remain_data"/}
                    </tbody>
                </table>

            </div>
            <!-- /.box-body -->
        </div>
        </div>
        <div class="col-md-3">
        <div class="box remain">
            <div class="box-header with-border">
                <h4 class="box-title">前8日留存率统计标准（以2016-7-16为例）</h3>
            </div>
            <div class="box-body">
                <table class="example-table" style="width: 100%;line-height: 50px;text-align: center;">
                    <thead>
                    <tr>
                        <th style="text-align: center;">留存率</th>
                        <th style="text-align: center;">登录日期</th>
                        <th style="text-align: center;">统计日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>次日留存率</td>
                        <td>7月17日</td>
                        <td>7月18日</td>
                    </tr>
                    <tr>
                        <td>2日留存率</td>
                        <td>7月18日</td>
                        <td>7月19日</td>
                    </tr>
                    <tr>
                        <td>3日留存率</td>
                        <td>7月19日</td>
                        <td>7月20日</td>
                    </tr>
                    <tr>
                        <td>4日留存率</td>
                        <td>7月20日</td>
                        <td>7月21日</td>
                    </tr>
                    <tr>
                        <td>5日留存率</td>
                        <td>7月21日</td>
                        <td>7月22日</td>
                    </tr>
                    <tr>
                        <td>6日留存率</td>
                        <td>7月22日</td>
                        <td>7月23日</td>
                    </tr>
                    <tr>
                        <td>7日留存率</td>
                        <td>7月23日</td>
                        <td>7月24日</td>
                    </tr>
                    <tr>
                        <td>8日留存率</td>
                        <td>7月24日</td>
                        <td>7月25日</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        </div>
    </div>
{/block}